<script setup lang="ts">
import { reactive, ref, onMounted, nextTick, watch, onBeforeMount } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { GetAllAgv } from '@/utils/api/dispatch/agv'
import { usePublicHooks } from './hooks'
import callingBtn from './components/callingBtn.vue'
import { initKonvaStage, mouseCorrd, stage, changeColor } from '@/views/home/components/dxfMap'
import { readFile } from '@/views/home/components/readFile'
import { GetStorePlaceList, GetAllStorePlaceList } from '@/utils/api/BasicManagement/locations'
import { GetAllStation } from '@/utils/api/dispatch/station'
import { dialogStoreHook } from "@/store/modules/dialog";
const dialogStatus = dialogStoreHook();

const agvOptions = ref([]);
const { switchStyle } = usePublicHooks();

const map = ref()

const props = withDefaults(defineProps<FormProps>(), {
    formInline: () => ({
        name: "",
        agvids: "",
        type: 0,
        intervaltime: "",
        triggertime: "",
        status: 1,
        note: "",
        stationList: [],
        agvNameList: [],
    }),
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const stationSelect = ref();
const siteList = ref()

function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });

// 监听全屏状态
watch(() => dialogStatus.isFullscreen, async (val) => {
    if (val) {
        const data = await readFile()
        await initKonvaStage('canvas', map, data, false)
        // 全屏后站点高亮
        dialogStatus.stationList.forEach(item => {
            changeColor(item.staid)
        })
    }
})

// 监听站点列表实时高亮
watch(() => dialogStatus.stationList, (val) => {
    if (dialogStatus.isFullscreen) {
        val.forEach(item => {
            changeColor(item.staid)
        })
    }
}, { deep: true })

onMounted(async () => {
    // 车辆
    const { Content } = await GetAllAgv()
    agvOptions.value = Content
})
</script>

<template>
    <div :class="dialogStatus.isFullscreen ? 'form_box' : ''">
        <div class="form_content">
            <el-alert title="可以通过窗口全屏展示地图" type="warning" center :closable="false" style="margin-bottom:20px" />
            <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="100px">
                <el-row :gutter="30">
                    <re-col :value="dialogStatus.isFullscreen ? 24 : 12" :xs="24" :sm="24">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="newFormInline.name" clearable placeholder="请输入名称" />
                        </el-form-item>
                    </re-col>
                    <re-col :value="dialogStatus.isFullscreen ? 24 : 12" :xs="24" :sm="24">
                        <el-form-item label="执行AGV" prop="agvids">
                            <el-select v-model="newFormInline.agvids" size="default" multiple placeholder="请选择执行的AGV"
                                style="width: 100%">
                                <el-option v-for="item in agvOptions" :key="item.AgvId" :label="item.AgvName"
                                    :value="item.AgvId" />
                            </el-select>
                        </el-form-item>
                    </re-col>
                    <re-col :value="12" :xs="24" :sm="24">
                        <el-form-item label="类型：" prop="type">
                            <el-select v-model="newFormInline.type" clearable placeholder="请选择类型" style="width: 100%">
                                <el-option label="循环触发" :value="0" />
                                <el-option label="定时触发" :value="1" />
                                <el-option label="指定时间触发" :value="2" />
                            </el-select>
                        </el-form-item>
                    </re-col>
                    <re-col :value="12" :xs="24" :sm="24">
                        <el-form-item label="状态" prop="status">
                            <el-switch v-model="newFormInline.status" inline-prompt :active-value="1"
                                :inactive-value="0" active-text="启用" inactive-text="停用" :style="switchStyle" />
                        </el-form-item>
                    </re-col>
                    <re-col :value="12" :xs="24" :sm="24" v-show="newFormInline.type === 1">
                        <el-form-item label="间隔时间" prop="intervaltime">
                            <el-input v-model="newFormInline.intervaltime" controls-position="right">
                                <template #append>分钟</template>
                            </el-input>
                        </el-form-item>
                    </re-col>
                    <re-col :value="12" :xs="24" :sm="24" v-show="newFormInline.type === 2">
                        <el-form-item label="触发时间" prop="triggertime">
                            <el-input v-model="newFormInline.triggertime" clearable placeholder="用逗号分隔如:08:00,12:30" />
                        </el-form-item>
                    </re-col>
                    <re-col :value="24" :xs="24" :sm="24">
                        <el-form-item label="站点信息" class="stationBox" style="font-weight: 700;" prop="stationList">
                            <callingBtn :data="newFormInline.stationList" :stationSelect="stationSelect"
                                :siteList="siteList">
                            </callingBtn>
                        </el-form-item>
                    </re-col>
                    <re-col :value="24" :xs="24" :sm="24">
                        <el-form-item label="备注" prop="note">
                            <el-input v-model="newFormInline.note" clearable placeholder="请输入备注" type="textarea" />
                        </el-form-item>
                    </re-col>
                </el-row>
            </el-form>
        </div>

        <div class="canvas_bg" v-if="dialogStatus.isFullscreen">
            <div id="canvas" ref="map"></div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.el-radio {
    margin-right: 16px;
}

// 左右布局
.form_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .form_content {
        width: 50%;
        padding: 0px 20px 0px 0px;


    }

    .canvas_bg {
        width: 60%;
        height: 500px;
        background: linear-gradient(90deg, rgba(62, 61, 61, 0.4) 2%, transparent 0%) 0 0, linear-gradient(180deg, transparent 99%, rgba(62, 61, 61, 0.4) 1%) 0 0;
        background-size: 50px 50px;
        background-color: #001529;

        #canvas {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
